<template>
  <div>
    <div class="lost-found-head">
      <div class="content-m">
        <el-row>
          <el-col :span="12">
            <p class="title">找回遗失的物品</p>
            <p class="title">连接失主与拾主</p>
            <p>
              我们提供便捷的失物招领平台，帮助您快速发布和查找失物信息，让每一件物品都能回到主人身边。
            </p>
            <el-button icon="Plus" type="primary" @click="createLostFound">发布信息</el-button>
            <el-button icon="Search" @click="goLostFoundSearch(0)">寻找失物</el-button>
          </el-col>
          <el-col :span="12">
            <el-card>
              <p>
                出门三检查，手机钥匙钱包卡；
              </p>
              <p>
                用完随手放原位，丢三落四不再怕！
              </p>
              <p>
                贵重物品随身带，离开回头望一望；
              </p>
              <p>
                习惯养成记心间，安全无忧少慌张！
              </p>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="content-m" style="padding: 30px 0">
      <el-row justify="center" :gutter="40">
        <el-col :span="4">
          <el-card class="item" style="background-color: #f3f7ff">
            <div>
              12,580
            </div>
            <div>总信息数</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="item" style="background-color: #fff8f2">
            <div>
              8,760
            </div>
            <div>成功找回</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="item" style="background-color: #f0fdf4">
            <div>
              98
            </div>
            <div>找回率(%)</div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="item" style="background-color: #faf5ff">
            <div>
              45,600
            </div>
            <div>注册用户</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="background-color: #f5f7fa;height:600px;padding: 30px">
      <div class="content-m flex-between">
        <div>
          <span style="font-weight: 600;font-size: 40px">最新寻物启事</span>
        </div>
        <div>
          查看全部
        </div>
      </div>
      <div class="content-m" style="margin-top: 20px">
        <el-space>
          <lost-card @click="goLostDetail(item.lostItemId)" v-for="item in lostItemPage.list" :key="item.lostItemId" :lostFoundItem="item"></lost-card>
        </el-space>
      </div>
    </div>
    <div style="height:600px;padding: 30px">
      <div class="content-m flex-between">
        <div>
          <span style="font-weight: 600;font-size: 40px">最新招领启事</span>
        </div>
        <div>
          查看全部
        </div>
      </div>
      <div class="content-m" style="margin-top: 20px">
        <el-space>
          <lost-card @click="goFoundDetail(item.foundItemId)" v-for="item in foundItemPage.list" :key="item.foundItemId" type="found"
                     :lostFoundItem="item"></lost-card>
        </el-space>
      </div>
    </div>
    <div style="height:400px;padding: 30px;background-color: #f5f7fa">
      <div class="content-m">
        <div style="padding: 20px;text-align: center">
          <h1>按物品类型浏览</h1>
        </div>
        <el-row justify="center" :gutter="20">
          <el-col :span="3" v-for="item in lostFoundCategory">
            <el-card class="flex-center" @click="goLostFoundSearch(item.lostFoundCategoryId)">
              <el-space direction="vertical">
                <el-button type="primary" circle :icon="item.icon" size="large"></el-button>
                <el-link>{{ item.name }}</el-link>
              </el-space>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {reqGetFoundItemPage, reqGetLostFoundCategoryList, reqGetLostItemPage} from "@/api/serve/lost/index.js";
import LostCard from '@/components/card/LostFoundCard.vue'
import {useUserStore} from "@/stores/user/index.js";

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
let lostItemQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  lostFoundCategoryId: 0,
  lostTime: null
})
let lostItemPage = reactive({
  total: 0,
  pageNum: 1,
  list: []
})
let lostFoundCategory = ref([])
let foundItemQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  category: 0,
  foundTime: null
})
let foundItemPage = reactive({
  total: 0,
  pageNum: 1,
  list: []
})

let createLostFound=() => {
  if (userStore.isLogin) {
    router.push({
      name: 'lost-found-create'
    })
  } else {
    userStore.showLoginDialog()
  }
}
let goFoundDetail = (itemId) => {
  router.push({
    name: 'found-detail',
    params: {
      itemId
    },
    query: {
      type: 'found'
    }
  })
}
let goLostDetail = (itemId) => {
  router.push({
    name: 'lost-detail',
    params: {
      itemId
    },
    query: {
      type: 'lost'
    }
  })
}
const getLostItemPage = async () => {
  let res = await reqGetLostItemPage(lostItemQuery)
  Object.assign(lostItemPage, res.data)
}
const getFoundItemPage = async () => {
  let res = await reqGetFoundItemPage(foundItemQuery)
  Object.assign(foundItemPage, res.data)
}
let goLostFoundSearch = (categoryId=0) => {
  router.push({
    name: 'lost-found-search',
    query: {
      categoryId: categoryId
    }
  })
}
let getLostFoundCategoryList = () => {
  reqGetLostFoundCategoryList().then((res) => {
    lostFoundCategory.value = res.data
  })
}

onMounted(() => {
  getLostItemPage()
  getLostFoundCategoryList()
  getFoundItemPage()
})
</script>
<style scoped>
.lost-found-head {
  height: 400px;
  background-color: #e5ecf9;
  padding: 20px;
}

.title {
  font-size: 50px;
}

.item {
  padding: 10px;
  text-align: center;
}
</style>
